<template>
  <div>
    <a-card class="cardBox ">
      <div class="tit" slot="title">工作专班</div>
      <div class="content" style="text-align: center">
        <!--work-->
        <img src="@/assets/img/gzzb.png" style="max-width: 100%; margin: auto"/>
        <!---->
      </div>
      <!--<div class="content work">
        <div class="itemTit">{{workData.title}}</div>
        <div class="itemWarp">
          <div class="items">
            <div class="item" v-for="(item, i) in workData.list" :key="i">{{item}}</div>
          </div>
        </div>
      </div>-->
    </a-card>
  </div>
</template>

<script>
  export default {
    name: 'HytBoard8',
    data () {
      return {
        workData: {
          title: '横店影视文化产业大脑集中攻坚专班',
          list: ['浙江省委宣传部', '浙江省经信厅', '浙江省广电局', '金华市委宣传部', '金华市委改革办', '金华市经信局', '东阳市委改革办', '东阳市经信局', '东阳市人社局', '东阳市大数据中心', '横店影视文化产业集聚区管委会']
        }
      }
    },
    mounted () {

    },
    watch: {
    },
    methods: {
    }
  }
</script>

<style scoped lang="less">
  .cardBox {
    margin-bottom: 16px;
    box-shadow: 0 0 12px rgba(0,0,0,.15);
    .tit {
      position: relative;
      padding-left: 8px; font-size: 20px;
    }

    .tit::before {
      display: inline-block;
      content: '';
      width: 2px;
      position: absolute;
      left: 0;
      top: 2px;
      bottom: 2px;
      background: #1890ff
    }
  }
  .work {
    text-align: center; display: grid; grid-auto-columns: 1fr; font-size: 15px; height: 350px;
    .itemTit {
      display: inline-block;
      margin: auto;
      border: 1px solid #3c70fb;
      padding: 10px 15px;
      font-weight: bold; background: #3c70fb; color: #fff;
      position: relative; margin-bottom: 30px;
    }
    .itemTit::after { content: ''; display: inline-block; width: 1px; height: 30px; background: #ccc;
      position: absolute; left: 50%; bottom: -30px;
    }
    .itemWarp {
      display: inline-block;
      margin: auto; margin-top: 29px;
      .items {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        box-sizing: border-box; position: relative;
        .item {writing-mode:vertical-lr;
          border: 1px solid #ccc; padding: 15px 10px; margin: 0 20px; position: relative; background: #e1f0ff;
        }
        .item::before {content: ''; display: inline-block; width: 1px; height: 30px; background: #ccc;
          position: absolute; left: 50%; top: -30px;}
      }
      .items::before {
        content: ''; display: inline-block; height: 1px; background: #ccc;
        position: absolute; left: 42px; right: 41px; top: -30px;
      }
    }
  }
</style>
